<!--
  $Id: Export.htm,v 1.1 2014/01/03 12:30:29 gaudenz Exp $
  Copyright (c) 2006-2013, JGraph Ltd
-->
<html>
<head>
	<title>Export example for mxGraph</title>

	<!-- Sets the basepath for the library if not in same directory -->
	<script type="text/javascript">
	    mxBasePath = '/mxgraph/javascript/src';
	</script>

	<!-- Loads and initializes the library -->
	<script type="text/javascript" src="/mxgraph/javascript/src/js/mxClient.js"></script>

	<!-- Example code -->
	<script type="text/javascript">
	    // Program starts here. Creates a sample graph in the
	    // DOM node with the specified ID. This function is invoked
	    // from the onLoad event handler of the document (see below).
	    function main(container) {
	        // Checks if the browser is supported
	        if (!mxClient.isBrowserSupported()) {
	            // Displays an error message if the browser is not supported.
	            mxUtils.error('Browser is not supported!', 200, false);
	        }
	        else {
	            // Disables the built-in context menu
	            mxEvent.disableContextMenu(container);

	            // Creates the graph inside the given container
	            var graph = new mxGraph(container);

	            // Enables rubberband selection
	            new mxRubberband(graph);

	            // Gets the default parent for inserting new cells. This
	            // is normally the first child of the root (ie. layer 0).
	            var parent = graph.getDefaultParent();

	            // Adds cells to the model in a single step
	            graph.getModel().beginUpdate();
	            try {
	                var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
	                var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
	                var e1 = graph.insertEdge(parent, null, '', v1, v2);
	            }
	            finally {
	                // Updates the display
	                graph.getModel().endUpdate();
	            }

	            // Exporting to SVG using EchoServlet
	            document.body.appendChild(mxUtils.button('Export SVG', function () {
	                var background = '#ffffff';
	                var scale = 1;
	                var border = 1;

	                var imgExport = new mxImageExport();
	                var bounds = graph.getGraphBounds();
	                var vs = graph.view.scale;

	                // Prepares SVG document that holds the output
	                var svgDoc = mxUtils.createXmlDocument();
	                var root = (svgDoc.createElementNS != null) ?
				    		svgDoc.createElementNS(mxConstants.NS_SVG, 'svg') : svgDoc.createElement('svg');

	                if (background != null) {
	                    if (root.style != null) {
	                        root.style.backgroundColor = background;
	                    }
	                    else {
	                        root.setAttribute('style', 'background-color:' + background);
	                    }
	                }

	                if (svgDoc.createElementNS == null) {
	                    root.setAttribute('xmlns', mxConstants.NS_SVG);
	                }
	                else {
	                    // KNOWN: Ignored in IE9-11, adds namespace for each image element instead. No workaround.
	                    root.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', mxConstants.NS_XLINK);
	                }

	                root.setAttribute('width', (Math.ceil(bounds.width * scale / vs) + 2 * border) + 'px');
	                root.setAttribute('height', (Math.ceil(bounds.height * scale / vs) + 2 * border) + 'px');
	                root.setAttribute('version', '1.1');

	                // Adds group for anti-aliasing via transform
	                var group = (svgDoc.createElementNS != null) ?
							svgDoc.createElementNS(mxConstants.NS_SVG, 'g') : svgDoc.createElement('g');
	                group.setAttribute('transform', 'translate(0.5,0.5)');
	                root.appendChild(group);
	                svgDoc.appendChild(root);

	                // Renders graph. Offset will be multiplied with state's scale when painting state.
	                var svgCanvas = new mxSvgCanvas2D(group);
	                svgCanvas.translate(Math.floor((border / scale - bounds.x) / vs), Math.floor((border / scale - bounds.y) / vs));
	                svgCanvas.scale(scale / vs);
	                imgExport.drawState(graph.getView().getState(graph.model.root), svgCanvas);

	                var xml = encodeURIComponent(mxUtils.getXml(root));
	                new mxXmlRequest('/Echo.ashx', 'filename=export.svg&format=svg' +
							'&xml=' + xml).simulate(document, '_blank');
	            }));

	            function exportFile(format) {
	                var bg = '#ffffff';
	                var scale = 1;
	                var b = 1;

	                var imgExport = new mxImageExport();
	                var bounds = graph.getGraphBounds();
	                var vs = graph.view.scale;

	                // New image export
	                var xmlDoc = mxUtils.createXmlDocument();
	                var root = xmlDoc.createElement('output');
	                xmlDoc.appendChild(root);

	                // Renders graph. Offset will be multiplied with state's scale when painting state.
	                var xmlCanvas = new mxXmlCanvas2D(root);
	                xmlCanvas.translate(Math.floor((b / scale - bounds.x) / vs), Math.floor((b / scale - bounds.y) / vs));
	                xmlCanvas.scale(scale / vs);

	                imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas);

	                // Puts request data together
	                var w = Math.ceil(bounds.width * scale / vs + 2 * b);
	                var h = Math.ceil(bounds.height * scale / vs + 2 * b);

	                var xml = mxUtils.getXml(root);

	                if (bg != null) {
	                    bg = '&bg=' + bg;
	                }

	                new mxXmlRequest('/Export.ashx', 'filename=export.' + format + '&format=' + format +
	        			bg + '&w=' + w + '&h=' + h + '&xml=' + encodeURIComponent(xml)).
	        			simulate(document, '_blank');
	            }

	            // Exporting to bitmap using ExportServlet
	            document.body.appendChild(mxUtils.button('Export PNG', function () {
	                exportFile('png');
	            }));
	        }
	    };
	</script>
</head>

<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">

	<!-- Creates a container for the graph with a grid wallpaper -->
	<div id="graphContainer"
		style="position:relative;overflow:hidden;width:321px;height:241px;border:1px solid gray;cursor:default;">
	</div>
</body>
</html>
